<template>
  <div>
    <div id="shape"></div>
  </div>
</template>

<script>
import zrender from 'zrender'
import bg from '@/assets/images/fac.png'
export default {
  name: "home",
  data() {
    return {
      bg: bg,
      zr: null,
      windowSize: null,
      originBgSize: {
        w: 1080,
        h: 1920,
        vertex: {
          x: 0,
          y: 1920 - 640
        }
      },
      aspect: null,
      factoryArea: {
        w: 1000,
        h: 600
      },
      coordinate: [{
        x: 500,
        y: 300
      }]
    }
  },
  mounted() {
    this.init();
  },
  methods: {
    async init() {
      let xxx = await this.setCanvas();
      //初始化zrender
      this.zr = zrender.init(document.getElementById('shape'),{
        width: this.windowSize.w,
        height: this.windowSize.h
      });
      // this.rectBg();
      this.backgoundImg();

      //添加模型
      this.basicModel(this.coordinate[0]);
    },
    //设置画布尺寸（必须与场区2.5d透视图尺寸比例一致，否则会导致坐标系错乱）
    setCanvas() {
      let windowSize = {
        w: window.innerWidth,
        h: window.innerHeight,
      }
      let originBgSize = this.originBgSize;
      let aspect = null;

      let windowAspect = windowSize.w/windowSize.h;
      let originBgAspect = originBgSize.w/originBgSize.h;

      if(windowAspect > originBgAspect)
      // 屏幕宽高比 大于 背景图宽高比， 以屏幕高度为基准缩放
      {
        originBgSize = {
          w: windowSize.h * originBgAspect,
          h: windowSize.h,
          offsetX: 0,
          offsetY: 0,
          vertex: {
            x: 0,
            y: 0
          }
        }

        aspect = 'vertical';
      }
      // 屏幕宽高比 小于 背景图宽高比， 以屏幕宽度为基准缩放
      else
      {
        console.log(windowSize.w / originBgAspect,'height');
        console.log(originBgSize.vertex.y,'原始坐标Y');
        console.log(originBgSize.h,'原始二维图高度');
        console.log((windowSize.w / originBgAspect) * originBgSize.vertex.y / originBgSize.h,'offset');
        console.log(windowSize.w / originBgAspect,'新二维图高度');
        originBgSize = {
          w: windowSize.w,
          h: windowSize.w / originBgAspect,
          offsetX: 0,
          offsetY: 0,
          vertex: {
            x: 0,
            y: (windowSize.w / originBgAspect) * originBgSize.vertex.y / originBgSize.h,
          }
        }

        aspect = 'horizon';
      }

      this.windowSize = windowSize;
      this.originBgSize = originBgSize;
      this.aspect = aspect;
      
    },
    backgoundImg() {
      let bgMesh = new zrender.Image({
        style: {
          image: this.bg,
          x: this.originBgSize.offsetX,
          y: this.originBgSize.offsetY,
          width: this.originBgSize.w,
          height: this.originBgSize.h
        }
      });
      this.zr.add(bgMesh);
    },
    rectBg() {
      let bg = new zrender.Rect({
        style: {
          fill: '#2cb375',
          opacity: 1
        },
        shape: {
          x: 0,
          y: 0,
          width: this.windowSize.w,
          height: this.windowSize.h
        }
      });
      this.zr.add(bg);
    },
    basicModel(coor) {
      coor = this.coorConputed(coor);
      let model = new zrender.Circle({
        style: {
          fill: 'red'
        },
        shape: {
          cx: coor.x,
          cy: coor.y,
          r: 5
        }
      });
      this.zr.add(model);
    },
    //平面坐标系转换
    coorConputed(coor) {
      let vertex = this.originBgSize.vertex;

      //厂区平面坐标系坐标
      let coordinateX = coor.x;
      let coordinateY = coor.y;


      return vertex;
    }
  }
}
</script>

<style scoped>

</style>
